import {h, defineComponent, getCurrentInstance, onMounted } from 'vue';
export default defineComponent({
    setup() {
        const echarts = getCurrentInstance()?.appContext.config.globalProperties.$echarts
        const setChart = ()=>{
            const myChart = echarts.init(document.getElementById("customerkeys") as HTMLElement);
            myChart.setOption({
                tooltip: {
                    show:false
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 10,
                    sizeRange: [12, 40],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: '80%',
                    height: '75%',
                    drawOutOfBound: false,
                    textStyle: {
                        normal: {
                            color: function() {//文字颜色的随机色
                                return 'rgb(' + [
                                    Math.round(Math.random() * 250),
                                    Math.round(Math.random() * 250),
                                    Math.round(Math.random() * 250)
                                ].join(',') + ')';
                            }
                        },
                        emphasis: {
                            shadowBlur: 5,
                            shadowColor: '#666'
                        }
                    },
                    data: [{
                        name: '数据可视化',
                        value: 3000,
                        // textStyle: {
                        // 	normal: {color: '#f52f55'},
                        // 	emphasis: {}
                        // }
                    }, {
                        name: '大数据',
                        value: 2181
                    }, {
                        name: '云计算',
                        value: 1386
                    }, {
                        name: '物联网',
                        value: 2055
                    }, {
                        name: '移动互联网',
                        value: 2467
                    }, {
                        name: '人工智能',
                        value: 2244
                    }, {
                        name: '深度学习',
                        value: 1898
                    }, {
                        name: '机器学习',
                        value: 1484
                    }, {
                        name: '区块链',
                        value: 3865
                    }, {
                        name: '互联网+',
                        value: 2222
                    }, {
                        name: '智能合约',
                        value: 366
                    }, {
                        name: '山东省',
                        value: 360
                    }, {
                        name: '数据挖掘',
                        value: 273
                    }, {
                        name: 'Java+',
                        value: 2222
                    }, {
                        name: '智能合约',
                        value: 366
                    }, {
                        name: 'python',
                        value: 360
                    }, {
                        name: '人工智能',
                        value: 273
                    }, {
                        name: '威海市',
                        value: 273
                    }],
                }],
                grid: {
                    top: '5%',
                    left: '5%',
                    right: '5%',
                    bottom: '5%'
                }
            });
            window.addEventListener("resize", ()=> {
                myChart.resize();
            });
        }
        onMounted(setChart)

        return () => h(
            <div id="customerkeys" style={{width:'100%', height:'180px'}}></div>
        )
    }
});